<!-- 楼层信息 -->
<template>
  <div class="Info-container">
    <div class="main" v-if="props.FloorInfo.length" >
      <BackgroundBox v-for="item in props.FloorInfo" :key="item.id" v-loadings="isLoading">
        <p class="title">楼层:{{ item.floorNumber }}</p>
        <div class="subject">
            <div class="left">
                <div class="item" v-for="it in item.RoomNos" :key="it.id">{{ it.roomNo }}</div>
            </div>
            <div class="rigth">
                <div class="item" v-if="item.Cleaning">
                    <p>保洁人员</p>
                    <p>{{ item.Cleaning.cleaningName }}</p>
                </div>
                <div class="item" v-else>
                    <p>保洁人员</p>
                    <p>暂无</p>
                </div>
                <div class="but">
                    <slot :data="item"></slot>
                </div>
            </div>
        </div>
      </BackgroundBox>
    </div>
    <div class="unavailable" v-else>
      <BackgroundBox>
        <Unavailable></Unavailable>
      </BackgroundBox>
    </div>
  </div>
</template>

<script setup>
import BackgroundBox from "@/components/BackgroundBox/index.vue";
import Unavailable from "@/components/Unavailable/index.vue";
const props = defineProps({
  FloorInfo: {
    type: Array,
    required: true,
  },
  isLoading:{
    type:Boolean,
    default:false
  }
});
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.Info-container {
  width: 100%;
  .main{
    position: relative;
    .back-container{
        margin-bottom: 30px;
    }

    .title{
        height: 60px;
        line-height: 60px;
        font-size: 1.2em;
        font-weight: bold;
        border-bottom:1px solid @Info;
        padding: 0 20px ;
    }
    .subject{
        display: flex;
        justify-content: space-between;
    }

    .left{
        flex: 3;
        
        display: grid;
        grid-template-columns: repeat(10,1fr);
        gap: 20px 20px;
        text-align: center;
        padding: 30px;
        .item{
            height: 40px;
            line-height: 40px;
            border-radius: 5px;
            background-color: @primary;
            color: @white;
        }
    }
    .rigth{
        flex: 1;
        display: flex;
        flex-direction: column;
        .item{
            margin:auto;
            display: flex;
            flex-direction: column;
            align-items: center;
           justify-content: center;
            width: 130px;
            height: 130px;
            border: 1px dashed @gray;
            p{
                margin: 5px 0;
            }
        }
        .but{
          
          text-align: center;
          
          margin-bottom: 10px;
        }
    }
  }
  .back-container{
    min-height: 200px;
    position: relative;
  }
}
</style>